<template>
	<view class="recharge-container">
		<view class="title">
			<text>请选择要充值的金额：</text>
		</view>
		<view class="money-group">
			<view class="money" @click="selectMoney(item.amount)" v-for="(item,index) in moneyGroup" :key="index"
				:class="amount===item.amount?'active':''">
				{{item.value}}
			</view>

		</view>
		<view class="button">
			<u-button type="primary" :text="'确认充值'" shape="circle"
				color="linear-gradient(135.00deg, rgba(118,118,238,1.00) 0.321%,rgba(138,138,238,1.00) 100%)"
				@click="recharge"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0,
				moneyGroup: [{
					value: '5元',
					amount: 5,
				}, {
					value: '10元',
					amount: 10,
				}, {
					value: '20元',
					amount: 20,
				}, {
					value: '30元',
					amount: 30,
				}, {
					value: '50元',
					amount: 50,
				}, {
					value: '100元',
					amount: 100,
				}]
			};
		},
		methods: {

			selectMoney(value) {
				this.amount = value
			},
			recharge() {
				const data = {
					userId: this.$store.getters?.userInfo?.uid,
					userBalance: this.amount
				}
				this.$http('post', 'api/private/userBalance/updateUserBalanceInfo', {
					data,
					success: (res) => {
						setTimeout(() => {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2];
							uni.navigateBack({
								delta: 1,
								success: () => {

									beforePage.$vm.getUserBalance()

								}
							})
						}, 1000)
					},
					successMsg: '充值成功！'
				})

			}
		}
	}

</script>

<style lang="scss">
	.recharge-container {
		height: 100vh;
		padding: 15px;
		background: #fff;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
	}

	.money-group {
		margin-top: 20px;
		display: grid;
		grid-gap: 20px;
		padding: 10px;
		grid-template-columns: 100px 100px 100px;

		.money {
			font-size: 20px;
			padding: 10px;
			text-align: center;
			border-radius: 10px;
			border: 1px solid rgba(118, 118, 238, 1.00);

			&.active {
				color: #fff;
				background: rgba(118, 118, 238, 1.00);
			}
		}

	}

	.button {
		margin-top: 80px;
	}

</style>

